<template>
  <!-- 已登录 -->
  <van-row v-if="user.isLogin" class="user-info">
  <van-image v-if="user.avatar" round width="100" height="100" src="{{ user.avatar }}" />
  <van-image v-else round width="100" height="100" :src="avatar_default " />
  <span class="user-info-name">{{ user.username }}</span>
  <van-button plain type="danger" size="mini" @click="onLogout">退出</van-button>
  </van-row>
<!-- 未登录 -->
<van-row v-else class="user-info">
<van-image round width="100" height="100" :src="avatar_default" /> 
<router-link :to="{ name: 'login' }">
<span class="user-info-name">登录&nbsp;&nbsp; |</span> 
</router-link>
<router-link :to="{ name: 'register' }">
<span class="user-info-name">注册</span>
</router-link> </van-row>
<van-row class="user-links"> <van-col span="6">
<van-icon name="pending-payment" />
待付款
</van-col>
<van-col span="6">
<van-icon name="records" :badge="user.isLogin ? '7' : ''" /> 待收货</van-col>
<van-col span="6">
<van-icon name="tosend" :badge="user.isLogin ? '11' : ''" />待评价</van-col>
<van-col span="6">
<van-icon name="logistics" :badge="user.isLogin ? '1' : ''" /> 退换/售后</van-col> 
</van-row>
<van-cell-group class="user-group my-title">
<van-cell icon="records" title="全部订单" is-link /> 
</van-cell-group>
<van-cell-group class="my-title">
<van-cell icon="points" title="我的积分" is-link />
<van-cell icon="gold-coin-o" title="我的优惠券" is-link /> 
<van-cell icon="gift-o" title="我的红包" is-link />
</van-cell-group> 
</template>
<script setup>
import avatar_default from '../assets/images/avatar_default1.jpg'
import router from '../router/index'
import useToken from '../stores/token' 
import useUser from '../stores/user'
import { showToast } from 'vant'

const { removeToken } = useToken()
const { user, removeUser } = useUser()

// 退出登录
const onLogout = async () => {
removeToken() 
removeUser()
router.push({ name: 'user' })
showToast({
message: '退出成功', type: 'success'
}) 
}
</script>

<style lang="less" scoped>
.user-info {
padding: 15px;
background: url(../assets/images/user_head_bg.png) no-repeat;
background-size: 100%;
}
.user-info button {
margin: 40px 0 0 10px;
}
.user-info-name {
display: inline-block; 
color: #fff;
padding: 40px 0 0 10px; 
font-size: 20px;
}
:deep(.van-badge--top-right) { 
  top: 4px;
right: 35px;
transform: translate(50%, -50%); 
}
.user {
&-group {
margin-bottom: 15px; 
}
&-links {
padding: 15px 0;
font-size: 12px;
text-align: center;
.van-icon {
display: block;  
font-size: 24px;
} }
}
</style>